import React, { useEffect } from 'react';
import {useRecoilState, useRecoilValue,useRecoilCallback} from 'recoil';
import axios from 'axios';
import {filteredTodoListState,showDemoNum,currentBaidu,fruitList} from './Todo_state';
import {TodoItemCreator} from './TodoItemCreator';
import {TodoItem} from './TodoItem';
import {TodoListStats} from './TodoListStats';
import {TodoListFilters} from './TodoListFilters';
const TodoList = () => {

    const todoList = useRecoilValue(filteredTodoListState);
    const obj = useRecoilValue(showDemoNum);
    let [getInfo,setInfo] = useRecoilState(currentBaidu);    
    const num = obj.val;

    const refreshList = useRecoilCallback(({snapshot}) => async() =>{
      // console.log("jin");
      // const data = await axios.get("http://localhost:5656/list");
      // console.log("refreshList。list",data);
      // setInfo("currentBaidu",data.data);
      let arr = await snapshot.getPromise(currentBaidu);
      console.log("refreshList。getInfo",arr);
    },[]);

    useEffect(()=>{
    },[]);

    const getF = () =>{

      refreshList();
    
    };

    return (
      <>
        <h1>添加按钮点击次数:{num}</h1>
        <button onClick={getF}>水果</button>
        <TodoListStats />
        <TodoListFilters />
        <TodoItemCreator />
  
        {todoList.map((todoItem, index) => (
          <TodoItem key={todoItem.id} item={todoItem} index={index} />
        ))}
      </>
    );
};

export { TodoList };
 